<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head>
<meta http-equiv="Content-Language" content="en-us"/>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>globus-extwin</title>

<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" charset="utf-8" src="../extjs/ext-all-debug.js"></script>

<!--Этот ключ мой:--> 
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAQSoN48j7rjZcIIA_ZoGJSRQ_2OOd3pJr2kTduwgeopUaa7SGeRQZhFrOA51woHTuA4Pf0Gm4ZMKzVA"> </script>
<!--Каждый пользователь должен иметь свой ключ. Сюда нужно вставить краткое описание процедуры получения ключа пользователем-->

<script src="http://earth-api-samples.googlecode.com/svn/trunk/lib/kmldomwalk.js" type="text/javascript"> </script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

<!--Этот ключ мой:--> 
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=4PVXOxPV34Fy5P2J0VnCtYorfRNbIb3CHMsJHkdLCoX1X25OBncuQRiJM.NKzQNPLObysL7D0HVGGW7q.zhXC.41cWz8yBQ-"></script>
<!--Каждый пользователь должен иметь свой ключ. Сюда нужно вставить краткое описание процедуры получения ключа пользователем-->


<!--Этот ключ мой:--> 
<script charset="windows-1251" src="http://maps.kosmosnimki.ru/api/api.js?key=UB93SI62JF"></script>
<!--Каждый пользователь должен иметь свой ключ. Сюда нужно вставить краткое описание процедуры получения ключа пользователем--> 

<script src="http://www.webglearth.com/api.js"></script>


<script type="text/javascript" src="globus-script-new.js"></script>

<style type="text/css">
.icon-folder16 {
    background-image: url(images/folder.gif) !important;
}

.icon-globus16 {
    background-image: url(images/094.png) !important;
}

.icon-newtab16 {
    background-image: url(images/new_tab.gif) !important;
}

.icon-find16 {
    background-image: url(images/info-small-2.png) !important;
}
 
.icon-photo16 {
    background-image: url(images/057.png) !important;
}
 
.icon-add {
    background-image: url(images/add.gif) !important;
}

.icon-add16 {
    background-image: url(images/add16.gif) !important;
}

.icon-add24 {
    background-image: url(images/add24.gif) !important;
}


.icon-find {
    background-image: url(images/find.gif) !important;
}

.icon-photo {
    background-image: url(images/camera_mode.png) !important;
} 
</style>

<script type="text/javascript">


Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../extjs/examples/ux');
Ext.require([
    'Ext.form.*',
    'Ext.window.Window',
    'Ext.data.*',
    'Ext.ux.FieldReplicator',
	'Ext.form.field.File',
    'Ext.form.field.Number',
    'Ext.form.Panel',
	'Ext.window.MessageBox'
]);

Ext.onReady(function(){

	    var msg = function(title, msg) {
			Ext.Msg.show({
				title: title,
				msg: msg,
				minWidth: 200,
				modal: true,
				icon: Ext.Msg.INFO,
				buttons: Ext.Msg.OK
			});
		};

		//Trees.js
		var siteStore = Ext.create('Ext.data.TreeStore', {
			proxy:{
				type: 'ajax',
				url: 'SiteTreeData.json'
			},
			root: {
				text: 'Tour Clubs/Турклубы',
				expanded: false
			}
		});
		var siteTreePanel = Ext.create('Ext.tree.Panel', {
			//title: '3D coastliner',
			width: 185,
			//maxHeight: 150,
			store: siteStore,
			rootVisible: true,
			renderTo: Ext.getBody(),
			bodyBorder: false,
			style: 'margin-left: 0px;margin-top: 10px;'
		});		
		var mapsStore = Ext.create('Ext.data.TreeStore', {
			root: {
				text:"Добавить карту-вкладку",
				expanded: false,
				children: [
					{
					text: "Следящие за Google Map",
					expanded: false,
					leaf: false,
					children: [
						{
						text: "Яндекс Карты",
						leaf: true
						},
						{
						text: "Open Street Map",
						leaf: true
						},
					]
					},
					{
					text: "Со следящими друг за другом слоями",
					expanded: false,
					leaf: false,
					children: [
						{
						text: "TopoMapper",
						expanded: false,
						leaf: false,
						children: [
							{
							text: "Советские Военные Карты",
							leaf: true
							}
						]
						},{
						text: "OSM Layers",
						leaf: true
						}
						
					]
					},
					{
					text: "Неследящие карты",
					expanded: false,
					leaf: false,
					children: [
						{
						text: "WikiMapia",
						leaf: true
						},
						{
						text: "Yahoo Map", //http://maps.yahoo.com/embed#lat=44.69989765840318&lon=38.067626953125&zoom=9&mvt=m&trf=0
						leaf: true
						},
						{
						text: "Космоснимки 3D",
						leaf: true
						},{
						text: "WebGL Earth",
						leaf: true
						},
					]
					}
				]		
			}
		});
		
		var mapsTreePanel = Ext.create('Ext.tree.Panel', {
			//title: 'Следящие карты',
			store: mapsStore,
			width: 185,
			//region: 'west',
			style: 'margin-left: 0px;margin-top: 10px;',
			//Взято из http://metanit.com/web/extjs/7.6.php:
			listeners: {
				itemclick : function(tree, record, item, index, e, options) {
					var nodeText = record.data.text//,
					//tabPanel = mapPanel//viewport.items.get(1)//, // получаем панель вкладок
					//tabBar = tabPanel.getTabBar(), // получаем тулбар вкладок на панели
					//tabIndex
					;
					if (nodeText == 'Яндекс Карты') {
						var tab = mapPanel.add({
							title : 'Яндекс Карты',
							closable: true,
							html : '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="yandexmap"></div>',
							tbar:[
							'->',
							{
								text:'Init (Reload), Следить за Google Map',
								handler:function() {
									initYandexMap();
									//win.autoLoad.url + '?' + (new Date).getTime());
									}
							}]//,
						});
						mapPanel.setActiveTab(tab);
					}
					if (nodeText == 'Open Street Map') {
						var tab = mapPanel.add({
							title : 'Open Street Map',
							closable: true,
							html : '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="openstreetmap"></div>',
							tbar:[
							'->',
							{
								text:'Init (Reload), Следить за Google Map',
								handler:function() {
									initOpenStreetMap();
									//win.autoLoad.url + '?' + (new Date).getTime());
								}
							}]//,
						});
						mapPanel.setActiveTab(tab);
					}
					if (nodeText == 'TopoMapper'
					//||'Soviet Military Maps'
					) {
						var tab = mapPanel.add({
							title : 'TopoMapper',
							closable: true,
							html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.topomapper.com/?zoom=9&lat=44.429800&lon=33.65181&layers=B0000000000F"></iframe>'
						});
						mapPanel.setActiveTab(tab);
					}
					if (nodeText == 'OSM Layers') {
						var tab = mapPanel.add({
							title : 'OSM Layers',
							closable: true,
							html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://openstreetmap.ru/#layer=C&zoom=9&lat=44.42980&lon=33.65181"></iframe>'
						//http://openstreetmap.ru/#layer=C&zoom=14&lat=53.20045&lon=45.0863
						});
						mapPanel.setActiveTab(tab);
					}
					if (nodeText == 'WikiMapia') {
						var tab = mapPanel.add({
							title : 'WikiMapia',
							closable: true,
							html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://wikimapia.org/#lat=44.429800&lon=33.65181&z=10&l=1&ifr=1&m=b"></iframe>'
						});
						mapPanel.setActiveTab(tab);
					}
					if (nodeText == 'Yahoo Map') {
						var tab = mapPanel.add({
							title : 'Yahoo Map',
							closable: true,
							html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.yahoo.com/embed#lat=44.429800&lon=33.651809&zoom=10&mvt=m&trf=0"></iframe>'
						});
						mapPanel.setActiveTab(tab);
					}
					//if (nodeText == 'Kosmosnimki') {
					//	mapPanel.add({
					//		title : 'Kosmosnimki',
					//		closable: true,
					//		html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="flash0.65639458717121"></div>',
					//		//Взято из http://examples.extjs.eu/?ex=dyntab:
					//		tbar:[{
					//			text:'Init (Reload)',
					//			handler:function() {
					//				initKosmosnimki(); 
					//				//win.autoLoad.url + '?' + (new Date).getTime());
					//			}
					//		}]//,
					//	});
					//	mapPanel.setActiveTab();
					//}
					if (nodeText == 'Космоснимки 3D') {
						var tab = mapPanel.add({
							title : 'Космоснимки 3D',
							closable: true,
							html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://kosmosnimki.ru/3d/index.html?x=3746246&y=5502004"></iframe>'
							//http://kosmosnimki.ru/permalink.html?N9ab94f68
							//http://kosmosnimki.ru/3d/index.html?x=3746246&y=5502004
						});	
						mapPanel.setActiveTab(tab);
					}
					
					if (nodeText == 'WebGL Earth') {
						var tab = mapPanel.add({
							title : 'WebGL Earth',
							closable: true,
							html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="webgl_earth"></div>',
							//Взято из http://examples.extjs.eu/?ex=dyntab:
							tbar:[
							{text:'Aerial', handler:function(){earth.setBaseMap(bingA);}},
							{text:'Aerial with labels', handler:function(){earth.setBaseMap(bingAWL);}},
							{text:'Road', handler:function(){earth.setBaseMap(bingR);}},
							'->',
							{text:'Init (Reload)', handler:function(){initWebGL();}}
							],
							listeners:{show:function() {
								this.loadMask = new Ext.LoadMask(this.body, {
										msg:'Loading. Please wait...'
									});
								}
							}
							//listeners: {
								//activate: function(panel) { 
										//initYandexMap();
								//}
							//}
						});
						mapPanel.setActiveTab(tab);
					}
					// обход по всем вкладкам и сравнение их текста с текстом нажатого узла
					//for ( var i = 0; i<tabBar.items.length; i++) {
						//if (tabBar.items.get(i).getText() === nodeText) {
							//tabIndex = i;
						//}
					//}
					// добавляем вкладку, если она отсутствует
					//if (Ext.isEmpty(tabIndex)) {
						//tabPanel.add({
							//title :record.data.text,
							//bodyPadding : 10,
							//html :record.data.text
						//});
						//tabIndex = tabPanel.items.length - 1;
					//}
					// делаем вкладку активной
					//tabPanel.setActiveTab(tabIndex);
				}
			}
		});
 
		//var miniMapsStore = Ext.create('Ext.data.TreeStore', {
		//			root: {
		//				text:"Мини-карты",
		//				leaf: false,
		//				expanded: false
		//			}
		//});
		//var miniMapsTreePanel = Ext.create('Ext.tree.Panel', {
		//	//title: 'Следящие карты',
		//	store: miniMapsStore,
		//	width: 185,
		//	//region: 'west',
		//	style: 'margin-left: 0px;margin-top: 10px;',
		//	renderTo: Ext.getBody(),
		//	handler: function () {
		//		minimapsWin.show();
		//	}
		//}); 
 
		var objectsStore = Ext.create('Ext.data.TreeStore', {
			proxy:{
				type: 'ajax',
				url: 'ObjectsTreeData.json'
			},
			root: {
				text: 'Изображения берегов',
				expanded: false
			}
		});
		var objectsTreePanel = Ext.create('Ext.tree.Panel', {
			//title: '3D coastliner',
			width: 185,
			//maxHeight: 150,
			store: objectsStore,
			rootVisible: true,
			renderTo: Ext.getBody(),
			style: 'margin-left: 0px;margin-top: 10px;',
		});
		
		var layersStore = Ext.create('Ext.data.TreeStore', {
			//proxy:{
				//type: 'ajax',
				//url: 'LayersTreeData.json'
			//},
			root: {
				text: 'Слои Google Earth',
				expanded: false,
				children:
				{
					text: 'Фотопанорамы',
					leaf: false,
					expanded: false,
					defaultType: 'checkbox',
					children: [
						{
						//xtype: checkbox,
						text: "360 cities",
						id: "kml-panocities-check",
						checked: true,
						leaf: true,
						boxLabel: '360 cities',
						name: 'kml-panocities-check',
						inputValue: 'kml-panocities-check',
						listeners : {
							//change: function(cb, newValue, oldValue, eOpts) {
									//if(newValue === true)
										//Ext.Msg.alert('Notify', newValue);
									//var alignPanels = function() {
											//if(Checkbox1.checked){
											//if(kml-panocities-check.checked){
												//var url = 'http://mw1.google.com/mw-earth-vectordb/dynamic/360cities/1/en/root.kmz';
												//google.earth.fetchKml(myGE, url, finished);
												//alert ('Checkbox Checked');
												//loadKml('panocities');
												//}
											//else{
												//RadioGroup1.disable();
											//}
									//}
							change : { 
								fn: function(){
								//fn : function(checkbox, checked){
								  //your logic
									//if(checked){
										alert ('Checkbox Chenged');
										//function finished(object) {
											  //if (!object) {
												// wrap alerts in API callbacks and event handlers
												// in a setTimeout to prevent deadlock in some browsers
												//setTimeout(function() {
												  //alert('Bad or null KML.');
												//}, 0);
												//return;
											  //}
											  //myGE.getFeatures().appendChild(object);
											  //var la = myGE.createLookAt('');
											  //la.set(37.77976, -122.418307, 25, myGE.ALTITUDE_RELATIVE_TO_GROUND, 
													 //180, 60, 500);
											  //myGE.getView().setAbstractView(la);         
										//}
										// fetch the KML
										//var url = 'http://mw1.google.com/mw-earth-vectordb/dynamic/360cities/1/en/root.kmz';
										//google.earth.fetchKml(myGE, url, finished);
									//}
								}
							}
								//,
								//scope : your-scope //---> Optional
						}
						},
						{
						text: "WWP",
						checked: false,
						leaf: true
						},
						{
						text: "ViewAt",
						checked: false,
						leaf: true
						},
						{
						text: "Gigapan",
						checked: false,
						leaf: true
						},
						{
						text: "Panoramio",
						checked: false,
						leaf: true
						}
					]
				}
			}
		});
		var layersTreePanel = Ext.create('Ext.tree.Panel', {
			//title: '3D coastliner',
			width: 185,
			//maxHeight: 150,
			store: layersStore,
			rootVisible: true,
			renderTo: Ext.getBody(),
			style: 'margin-left: 0px;margin-top: 10px;'
		});	
		var optionsStore = Ext.create('Ext.data.TreeStore', {
			//proxy:{
				//type: 'ajax',
				//url: 'OptionsTreeData.json'
			//},
			root: {
				text: 'Опции Google Earth',
				expanded: false,
				children: [{
					text: "Границы и названия",
					leaf: true,
					checked: false,
					handler: function () {
						updateBorders();
					}
				},{
					text: "Дороги",
					leaf: true,
					checked: false,
					handler: function () {
						updateRoads();
					}
				},{
					text: "Строка состояния",
					leaf: true,
					handler: function () {
						updateOptions();
					}
				},{
					text: "Координатная сетка",
					leaf: true//,
					//"href": "javascript:updateOptions();"
				},{
					text: "Обзорная карта",
					leaf: true//,
					//"href": "javascript:updateOptions();"
				},{
					text: "Масштабная линейка",
					leaf: true//,
					//"href": "javascript:updateOptions();"
				}],
			}
		});
		var optionsTreePanel = Ext.create('Ext.tree.Panel', {
			//title: '3D coastliner',
			width: 185,
			//maxHeight: 150,
			store: optionsStore,
			rootVisible: true,
			renderTo: Ext.getBody(),
			style: 'margin-left: 0px;margin-top: 10px;'
		});		
		//eo Trees.js
		
		var usersStore = Ext.create('Ext.data.TreeStore', {
			proxy:{
				type: 'ajax',
				url: 'UsersTreeData.json'
			},
			root: {
				text: 'New Users Tree',
				expanded: false
			}
		});
		var usersTreePanel = Ext.create('Ext.tree.Panel', {
			//title: '3D coastliner',
			width: 185,
			//maxHeight: 150,
			store: usersStore,
			rootVisible: true,
			renderTo: Ext.getBody(),
			style: 'margin-left: 0px;margin-top: 10px;',
		});

		var onlineStore = Ext.create('Ext.data.TreeStore', {
			proxy:{
				type: 'ajax',
				url: 'OnlineTreeData.json'
			},
			root: {
				text: 'Who\'s online?',
				expanded: false
			}
		});		
		var onlineTreePanel = Ext.create('Ext.tree.Panel', {
			//title: '3D coastliner',
			width: 185,
			//maxHeight: 150,
			store: onlineStore,
			rootVisible: true,
			renderTo: Ext.getBody(),
			style: 'margin-left: 0px;margin-top: 10px;',
		});
		
		var globusFoldersMenu = Ext.create('Ext.menu.Menu', {
				id: 'globusfoldersmenu',
				style: {
					overflow: 'visible'     // For the Combo popup
				},
				items: {
					xtype: 'buttongroup',
                    //title: 'User options',
                    columns: 1,
                    defaults: {
                        xtype: 'button',
                        scale: 'large',
                        iconAlign: 'left'
					},
                    items: [	
						{
							//colspan: 2,
							text: 'Mini Maps Window',
							scale: 'small',
							width: 130,
							disabled: false,
							enableToggle: true,
							toggleHandler: function (button, state) {
								if (state) {
										minimapsWin.show();
								} else {
									minimapsWin.hide();
								} 
							},
							pressed: true
						}
					]
				}
		}); // eo globalControlWindowMenu = Ext.create('Ext.menu.Menu', {
		
		//http://dev.sencha.com/deploy/ext-4.0.0/examples/menu/menus.js:
		var layersOptionsMenu = Ext.create('Ext.menu.Menu', {
				id: 'layersoptionsmenu',
				style: {
					overflow: 'visible'     // For the Combo popup
				},
				items: [
					{
						text: 'Слои (Фотопанорамы):',
					},
					{
						text: '360 Cities',
						checked: true,       // when checked has a boolean value, it is assumed to be a CheckItem
						//handler: fetchPanocities ();
						handler: function (){
							var nl = myGE.createNetworkLink("");
							var link = myGE.createLink("");
							link.setHref('http://mw1.google.com/mw-earth-vectordb/dynamic/360cities/1/en/root.kmz');
							nl.setLink(link);
							myGE.getGlobe().getFeatures().appendChild(nl);
							nl.setVisibility(true);		
						}
					},
					{
						text: 'World Wide Panorama',
						checked: false,       // when checked has a boolean value, it is assumed to be a CheckItem
						handler: function (){
							var nl = myGE.createNetworkLink("");
							var link = myGE.createLink("");
							link.setHref('http://www.worldwidepanorama.org/worldwidepanorama/wwp_all/all_of_wwp.kmz');
							nl.setLink(link);
							myGE.getGlobe().getFeatures().appendChild(nl);
							nl.setVisibility(true);		
						}
					},
					{
						text: 'ViewAt',
						checked: false,       // when checked has a boolean value, it is assumed to be a CheckItem
						handler: function (){
							var nl = myGE.createNetworkLink("");
							var link = myGE.createLink("");
							link.setHref('http://services.google.com/earth/kmz/view_at_n.kmz');
							nl.setLink(link);
							myGE.getGlobe().getFeatures().appendChild(nl);
							nl.setVisibility(true);		
						}
					},
					{
						text: 'Gigapan',
						checked: false,       // when checked has a boolean value, it is assumed to be a CheckItem
						handler: function (){
							var nl = myGE.createNetworkLink("");
							var link = myGE.createLink("");
							link.setHref('http://mw2.google.com/mw-earth-vectordb/gallery_website/en/Gigapan_Photos.kml');
							nl.setLink(link);
							myGE.getGlobe().getFeatures().appendChild(nl);
							nl.setVisibility(true);		
						}
					},
					{
						text: 'Panoramio Best Photos',
						checked: false,       // when checked has a boolean value, it is assumed to be a CheckItem
						handler: function (){
							var nl = myGE.createNetworkLink("");
							var link = myGE.createLink("");
							link.setHref('https://sites.google.com/site/3dcoastliner/home/680_PanoramioBestFo.kmz');
							nl.setLink(link);
							myGE.getGlobe().getFeatures().appendChild(nl);
							nl.setVisibility(true);		
						}
					},
					'-',
					{
						text: 'Горные перевалы:',
					},
					{
						text: 'Passes',
						checked: false,       // when checked has a boolean value, it is assumed to be a CheckItem
						handler: function (){
							var nl = myGE.createNetworkLink("");
							var link = myGE.createLink("");
							link.setHref('http://www.westra.ru/passes/kml/passes.kml');
							nl.setLink(link);
							myGE.getGlobe().getFeatures().appendChild(nl);
							nl.setVisibility(true);		
						}
					},
					'-',
					{
						text: 'Опции Глобуса:',
					},
					{				
						text: 'Borders',
						checked: false,       // when checked has a boolean value, it is assumed to be a CheckItem
						handler: function () {
							updateBorders();
						}
					},
					{
						text: 'Roads',
						checked: false,       // when checked has a boolean value, it is assumed to be a CheckItem
						handler: function () {
							updateRoads();
						}
					},{
						text: 'Status Bar',
						checked: false, 
						disabled: true  
					},{
						text: 'Grid',
						checked: false, 
						disabled: true  
					},{
						text: 'Overview Map',
						checked: false, 
						disabled: true  
					},{
						text: 'Scale Legend',
						checked: false, 	
						disabled: true  
					}
				]
		}); // eo layersOptionsMenu = Ext.create('Ext.menu.Menu', {
		//layesrOptionsMenu.add(
		//	{
		//		//options.setStatusBarVisibility(form.statusbar.checked);
		//		//options.setGridVisibility(form.grid.checked);
		//		//options.setOverviewMapVisibility(form.overview.checked);
		//		//options.setScaleLegendVisibility(form.scaleLegend.checked);
		//		text: 'Status Bar',
		//		id: 'statusbar'  // <-- Items can also have an id for easy lookup
		//		// disabled: true   <-- allowed but for sake of example we use long way below
		//	},{text: 'Grid',
		//		id: 'grid'  
		//	},{text: 'Overview Map',
		//		id: 'overviewmap'  
		//	},{text: 'Scale Legend',
		//		id: 'scalelegend'  
		//	});
		//	// access items by id or index
		//layesrOptionsMenu.items.get('statusbar').disable();
		//layesrOptionsMenu.items.get('grid').disable();
		//layesrOptionsMenu.items.get('overviewmap').disable();
		//layesrOptionsMenu.items.get('scalelegend').disable();
		
		var usersMenu = Ext.create('Ext.menu.Menu', {
				id: 'usersmenu',
				style: {
					overflow: 'visible'     // For the Combo popup
				},
				items: {
					xtype: 'buttongroup',
                    title: 'User options',
                    columns: 2,
                    defaults: {
                        xtype: 'button',
                        scale: 'large',
                        iconAlign: 'left'
					},
                    items: [	
						{
							iconCls: 'icon-add24',
							width: 'auto',
							tooltip: 'Add user',
							width: 40,
							disabled: true
						},{
							text: 'User<br/>manager',
							iconCls: 'icon-edit',
							width: 90,
							disabled: false,
							menu: {        // <-- submenu by nested config object
								items: [
									// stick any markup in a menu
									'<b class="menu-title">Choose:</b>',
									{
										text: 'Create tourclub<br/>Создать турклуб',
										tooltip: 'Add club',
										//checked: true,
										//group: 'theme',
										//checkHandler: onItemCheck
									}, {
										text: 'Create tourgroup<br/>Создать тургруппу',
										tooltip: 'Add group',
										//checked: false,
										//group: 'theme',
										//checkHandler: onItemCheck
									}, {
										text: 'Create tourist<br/>Создать участника',
										tooltip: 'Add user',
										//checked: false,
										//group: 'theme',
										//checkHandler: onItemCheck
									}
								]
							}
						},{
							colspan: 2,
							text: 'Who is online?',
							iconCls: 'icon-find',
							//scale: 'small',
							width: 130,
							disabled: false
						},{
							colspan: 2,
							iconCls: 'icon-add',
							width: 'auto',
							//tooltip: 'Add user',
							text: 'Add user',
							//scale: 'small',
							width: 130,
							disabled: false,
							enableToggle: true,
							toggleHandler: function (button, state) {
								if (state) {
										addUserWin.show();
								} else {
									addUserWin.hide();
								} 
							},
							pressed: false
							//handler: function () {
							//	addUserWin.show();	
							//}
						//},{
						//	colspan: 2,
						//	text: 'Import',
						//	scale: 'small',
						//	width: 130,
						//	checked: true,
						//	disabled: false
						},{
							colspan: 2,
							iconCls: 'icon-photo',
							width: 'auto',
							//tooltip: 'Add user',
							text: 'Take a Photo',
							//scale: 'small',
							width: 130,
							disabled: false,
							enableToggle: true,
							toggleHandler: function (button, state) {
								if (state) {
									photoWin.show();
								} else {
									photoWin.hide();
								} 
							},
							pressed: false
						},{
							colspan: 2,
							//iconCls: 'icon-add',
							width: 'auto',
							//tooltip: 'Add user',
							text: 'Hello PHP Window ',
							scale: 'small',
							width: 130,
							disabled: false,
							enableToggle: true,
							toggleHandler: function (button, state) {
								if (state) {
										constrainedWin.show();
								} else {
									constrainedWin.hide();
								} 
							},
							pressed: false
						},{
							colspan: 2,
							//iconCls: 'icon-add',
							width: 'auto',
							//tooltip: 'Add user',
							text: 'PHP Window 2 ',
							scale: 'small',
							width: 130,
							disabled: false,
							enableToggle: true,
							toggleHandler: function (button, state) {
								if (state) {
									phpWin.show();
								} else {
									phpWin.hide();
								} 
							},
							pressed: false
						},{
							colspan: 2,
							//iconCls: 'icon-add',
							width: 'auto',
							//tooltip: 'Add user',
							text: 'TZ Window',
							scale: 'small',
							width: 130,
							disabled: false,
							enableToggle: true,
							toggleHandler: function (button, state) {
								if (state) {
									tzWin.show();
								} else {
									tzWin.hide();
								} 
							},
							pressed: false
						},{
							colspan: 2,
							//iconCls: 'icon-add',
							width: 'auto',
							//tooltip: 'Add user',
							text: 'Save File Window',
							scale: 'small',
							width: 130,
							disabled: false,
							enableToggle: true,
							toggleHandler: function (button, state) {
								if (state) {
									saveFileWin.show();
								} else {
									saveFileWin.hide();
								} 
							},
							pressed: false
						},{
							colspan: 2,
							//iconCls: 'icon-add',
							width: 'auto',
							//tooltip: 'Add user',
							text: 'Read File Window',
							scale: 'small',
							width: 130,
							disabled: false,
							enableToggle: true,
							toggleHandler: function (button, state) {
								if (state) {
									readFileWin.show();
								} else {
									readFileWin.hide();
								} 
							},
							pressed: false
						}
					]
				}
		}); // eo usersMenu = Ext.create('Ext.menu.Menu', {		
		
		//http://dev.sencha.com/deploy/ext-4.0.0/examples/menu/menus.js:
		var addMapsMenu = Ext.create('Ext.menu.Menu', {
				id: 'addMapsMenu',
				style: {
					overflow: 'visible'     // For the Combo popup
				},
				items: [
					{
						text: 'Следящие за Глобусом карты:'
					},{
						text:'Яндекс Карты'
						,iconCls:'icon-newtab16'
						,handler:function() {
							var tab = mapPanel.add({
								title :'Яндекс Карты',//record.data.text,
								closable: true,
								html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="yandexmap"></div>',
								tbar:['->',{
									text:'Init (Reload), Следить за Google Map',
									handler:function() {
										initYandexMap();
									}
								}]
							});
						mapPanel.setActiveTab(tab);
						}
					},{
						text:'Open Street Map'
						,iconCls:'icon-newtab16'
						,handler:function() {
							var tab = mapPanel.add({
								title :'Open Street Map',//record.data.text,
								closable: true,
								html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="openstreetmap"></div>',
								tbar:['->',{
									text:'Init (Reload), Следить за Google Map',
									handler:function() {
										initOpenStreetMap();
									}
								}],
							});
						mapPanel.setActiveTab(tab);
						}
					},'-', {
						text: 'Карты со следящими друг за другом слоями:'
					},{
						text:'TopoMapper (Soviet Military Maps, ...):',
						iconCls:'icon-newtab16',
						handler:function() {
							var tab = mapPanel.add({
								title : 'TopoMapper',
								closable: true,
								html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.topomapper.com/?zoom=9&lat=44.42980&lon=33.65181&layers=B0000000000F"></iframe>'
							});
							mapPanel.setActiveTab(tab);
						}
					},{
						text:'OSM Layers',
						iconCls:'icon-newtab16',
						handler:function() {
							var tab = mapPanel.add({
								title : 'OSM Layers',
								closable: true,
								html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://openstreetmap.ru/#layer=C&zoom=9&lat=44.42980&lon=33.65181"></iframe>'
							});
							mapPanel.setActiveTab(tab);
						}
					},'-', {
						text: 'Неследящие карты:'
					},{
						text:'WikiMapia',
						iconCls:'icon-newtab16',
						handler:function() {
							var tab = mapPanel.add({
								title : 'WikiMapia',
								closable: true,
								html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://wikimapia.org/#lat=44.429800&lon=33.651809&z=10&l=1&ifr=1&m=b"></iframe>'
							});	
							mapPanel.setActiveTab(tab);
						}
					},{
						text:'Yahoo Map',
						iconCls:'icon-newtab16',
						handler:function() {
							var tab = mapPanel.add({
								title : 'Yahoo Map',
								closable: true,
								html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.yahoo.com/embed#lat=44.429800&lon=33.651809&zoom=10&mvt=m&trf=0"></iframe>'
							});	
							mapPanel.setActiveTab(tab);
						}
					},{
						text:'Космоснимки 3D',
						iconCls:'icon-newtab16',
						handler:function() {
							var tab = mapPanel.add({
								title : 'Космоснимки 3D',
								closable: true,
								html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://kosmosnimki.ru/3d/index.html?x=3746246&y=5502004"></iframe>'
							});	
							mapPanel.setActiveTab(tab);
						}
					},{
						text:'WebGL Earth',
						iconCls:'icon-newtab16',
						handler:function() {
							var tab = mapPanel.add({
								title : 'WebGL Earth',
								closable: true,
								html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="webgl_earth"></div>',
								//Взято из http://examples.extjs.eu/?ex=dyntab:
								tbar:[
									{text:'Aerial', handler:function(){earth.setBaseMap(bingA);}},
									{text:'Aerial with labels', handler:function(){earth.setBaseMap(bingAWL);}},
									{text:'Road', handler:function(){earth.setBaseMap(bingR);}},
									'->',
									{text:'Init (Reload)', handler:function(){initWebGL();}}
									],
								listeners:{show:function() {
										this.loadMask = new Ext.LoadMask(this.body, {
											msg:'Loading. Please wait...'
										});
									}
								}
							});
							mapPanel.setActiveTab(tab);
						}
					},'-', {
						text:'Мини-карты',
						iconCls:'icon-newtab16',
						enableToggle: true,
						toggleHandler: function (button, state) {
									//Ext.Msg.alert('', button.text + ' button is toggled? <code>' + state.toString() + '</code>');
									if (state) {
										minimapsWin.show();
									} else {
										minimapsWin.hide();
									} 
								},
						pressed: true
					},
				]
		}); // eo addMapsMenu = Ext.create('Ext.menu.Menu', {		
		
		var mapPanel = Ext.create('Ext.tab.Panel', {
				renderTo: Ext.getBody(),
				//title: 'Maps',
				collapsible: false,
				region:'center',
				activeTab: 0,
				plain: true,
				//margins: '5 0 0 0',
				//html: 'Maps Panel',
				items: [
					{
						// Explicitly define the xtype of this Component configuration.
						// This tells the Container (the tab panel in this case)
						// to instantiate a Ext.panel.Panel when it deems necessary
						xtype: 'panel',
						title: 'Google Earth',
						itemId: 'google earth',
						//Взято из http://examples.extjs.eu/?ex=dyntab:
						tbar:[
							{
								text:'Globus Folders',
								iconCls: 'icon-folder16',  // <-- icon
								expanded: true,
								enableToggle: true,
								//toggleHandler: onItemToggle,
									//Пример из https://github.com/pdehaan/SenchaExamples.com/blob/master/ExtJS/Ext.Button.toggleHandler/index.html:
									//Ext.create('Ext.Button', {
									//	enableToggle: true,
									//	text: 'Sencha',
									//	toggleHandler: function (button, state) {
									//		Ext.Msg.alert('', button.text + ' button is toggled? <code>' + state.toString() + '</code>');
									//	}, // toggleHandler
									//	renderTo: Ext.getBody()
									//});
								toggleHandler: function (button, state) {
									//Ext.Msg.alert('', button.text + ' button is toggled? <code>' + state.toString() + '</code>');
									if (state) {
										westWin.show();
									} else {
										westWin.hide();
									} 
								},
								pressed: true,
								menu: globusFoldersMenu
								//items: {
								//	text:'Minimaps',
								//	iconCls: 'bmenu',  // <-- icon
								//	//expanded: true,
								//	enableToggle: true,
								//	toggleHandler: function (button, state) {
								//		if (state) {
								//			minimapsWin.show();
								//		} else {
								//			minimapsWin.hide();
								//		} 
								//	},
								//	pressed: true//,
								//}
							},{
								text:'Globus Layers/Options',
								iconCls: 'icon-globus16',  // <-- icon
								//background-image: url(../images/bmenu.png),
								expanded: true,
								//enableToggle: true,
								//toggleHandler: onItemToggle,
								//pressed: true,
								menu: layersOptionsMenu // assign menu by instance
							},{
								text:'Add Map',
								iconCls: 'icon-newtab16',  // <-- icon
								expanded: true,
								//enableToggle: true,
								//toggleHandler: onItemToggle,
								//pressed: true,
								menu: addMapsMenu // assign menu by instance
							},
							//,
							//{
							//	text:'Показать мини-карты'
							//	,iconCls:'icon-plus'
							//	,handler:function() {
							//		win.show();
							//	}
							//},
							//{
							//	text:'Скрыть миникарты'
							//	,iconCls:'icon-minus'
							//	,handler:function() {
							//		win.hide();
							//	}
							//}
							{
								text:'Who is online?',
								iconCls: 'icon-find16',
								menu: usersMenu
							},
							'->',
							{
								text: 'Photo Window',
								iconCls: 'icon-photo16',  // <-- icon ???
								//background-image: url(../images/camera_mode.png),
								//width: 130,
								//disabled: false,
								enableToggle: true,
								toggleHandler: function (button, state) {
									if (state) {
										photoWin.show();
									} else {
										photoWin.hide();
									} 
								},
								pressed: false
							}
						],
						html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="map3d"></div>',
						//listeners: {
							//render: function() { 
									//initGoogleMap();
							//}
						//}
					},
					{
						// Explicitly define the xtype of this Component configuration.
						// This tells the Container (the tab panel in this case)
						// to instantiate a Ext.panel.Panel when it deems necessary
						xtype: 'panel',
						title: 'Google Map',
						itemId: 'google map',
						html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="googlemap"></div>',
						//не работает:
						tools:[
							{
								type:'refresh',
								tooltip: 'Refresh form Data',
								// hidden:true,
								handler: function(event, toolEl, panel){
									// refresh logic
									initGoogleMap();
									}
							},
							{
								type:'help',
								tooltip: 'Get Help',
								handler: function(event, toolEl, panel){
									// show help here
									}
							}
						],
						//Взято из http://examples.extjs.eu/?ex=dyntab:
						tbar:['->',{
							text:'Init (Reload), Следить за Google Earth, Показывать поле обзора Google Earth',
							tooltip: {text:'Карта начинает следить за Глобусом после его первого перемещения', title:'Следит за Глобусом?'}, //не работает
							handler:function() {
								initGoogleMap(); 
								//win.autoLoad.url + '?' + (new Date).getTime());
								}
							}],
						//не работает:
						listeners:{show:function() {
								this.loadMask = new Ext.LoadMask(this.body, {
									msg:'Loading. Please wait...'
								});
							}
						}
						//listeners: {
							//activate: function(panel) { 
									//initGoogleMap();
							//}
						//}
					},
					{
						xtype: 'panel',
						title: 'Яндекс Карты',
						itemId: 'yandexmap',
						closable: true,
						html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="yandexmap"></div>',
						//Взято из http://examples.extjs.eu/?ex=dyntab:
						tbar:['->',{
							text:'Init (Reload), Следить за Google Map',
							handler:function() {
								initYandexMap(); 
								//win.autoLoad.url + '?' + (new Date).getTime());
								}
							}],
						listeners:{show:function() {
							this.loadMask = new Ext.LoadMask(this.body, {
									msg:'Loading. Please wait...'
								});
							}
						}
						//listeners: {
							//activate: function(panel) { 
									//initYandexMap();
							//}
						//}
					},
					{
						xtype: 'panel',
						title: 'Open Street Map',
						itemId: 'openstreetmap',
						closable: true,
						html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="openstreetmap"></div>',
						//Взято из http://examples.extjs.eu/?ex=dyntab:
						tbar:['->',{
							text:'Init (Reload), Следить за Google Map',
							handler:function() {
								initOpenStreetMap(); 
								//win.autoLoad.url + '?' + (new Date).getTime());
								}
							}],
						listeners:{show:function() {
							this.loadMask = new Ext.LoadMask(this.body, {
									msg:'Loading. Please wait...'
								});
							}
						}
						//listeners: {
							//activate: function(panel) { 
									//initYandexMap();
							//}
						//}
					},
					//{
						//xtype: 'panel',
						//title: 'Open Street Map',
						//closable: true,
						//html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=36.947,44.359,37.997,45.214&amp;layer=mapnik" style="border: 0px solid black"></iframe>'
						//listeners: {
							//render: function() {
								//Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
							//}
						//}
					//},
					{
						xtype: 'panel',
						title : 'TopoMapper',
						closable: true,
						html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.topomapper.com/?zoom=9&lat=44.42980&lon=33.65181&layers=B0000000000F"></iframe>'
					},
					{
						xtype: 'panel',
						title : 'OSM Layers',
						closable: true,
						html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://openstreetmap.ru/#layer=C&zoom=9&lat=44.42980&lon=33.65181"></iframe>'
						//http://openstreetmap.ru/#layer=C&zoom=14&lat=53.20045&lon=45.0863
					},
					{
						// this component configuration does not have an xtype since 'panel' is the default
						// xtype for all Component configurations in a Container
						xtype: 'panel',
						title: 'WikiMapia',
						itemId: 'wikimapia',
						closable: true,
						html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://wikimapia.org/#lat=44.429800&lon=33.651809&z=10&l=1&ifr=1&m=b"></iframe>'
						//listeners: {
							//render: function() {
								//Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
							//}
						//}
					},
					{
						xtype: 'panel',
						title : 'Yahoo Map',
						closable: true,
						html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.yahoo.com/embed#lat=44.429800&lon=33.651809&zoom=10&mvt=m&trf=0"></iframe>'
					},
					//{
						//xtype: 'panel',
						//title: 'Yahoo Map',
						//itemId: 'yahoo map',
						//closable: true,
						 //Взято из http://examples.extjs.eu/?ex=dyntab:
						//tbar:[{
							//text:'Init (Reload)',
							//handler:function() {
								//initYahooMap(); 
								 //win.autoLoad.url + '?' + (new Date).getTime());
								//}
							//}],
						//listeners:{show:function() {
							//this.loadMask = new Ext.LoadMask(this.body, {
									//msg:'Loading. Please wait...'
								//});
							//}
						//},
						//html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="yahoomap"></div>'//,
						//listeners: {
							//activate: function(panel) { 
									//initYahooMap();
							//}
						//}
					//},
					//{
					//	xtype: 'panel',
					//	title: 'Kosmosnimki',
					//	itemId: 'kosmosnimki',
					//	closable: true,
					//	html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="flash0.65639458717121"></div>',
					//	//http://kosmosnimki.ru/permalink.html?N9ab94f68
					//	//http://kosmosnimki.ru/3d/index.html?x=3746246&y=5502004
					//	//Взято из http://examples.extjs.eu/?ex=dyntab:
					//	tbar:[{
					//		text:'Init (Reload)',
					//		handler:function() {
					//			initKosmosnimki(); 
					//			//win.autoLoad.url + '?' + (new Date).getTime());
					//			}
					//		}]
					//	//listeners:{show:function() {
					//		//this.loadMask = new Ext.LoadMask(this.body, {
					//				//msg:'Loading. Please wait...'
					//			//});
					//		//}
					//},
					{
						xtype: 'panel',
						title: 'Космоснимки 3D',
						itemId: 'kosmosnimki3d',
						closable: true,
						html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://kosmosnimki.ru/3d/index.html?x=3746246&y=5502004"></iframe>'
					},
					{
						xtype: 'panel',
						title: 'WebGL Earth',
						itemId: 'webglearth',
						closable: true,
						html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="webgl_earth"></div>',
						//Взято из http://examples.extjs.eu/?ex=dyntab:
						tbar:[
							{text:'Aerial', handler:function(){earth.setBaseMap(bingA);}},
							{text:'Aerial with labels', handler:function(){earth.setBaseMap(bingAWL);}},
							{text:'Road', handler:function(){earth.setBaseMap(bingR);}},
							'->',
							{text:'Init (Reload)', handler:function(){initWebGL();}}
						],
						listeners:{show:function() {
							this.loadMask = new Ext.LoadMask(this.body, {
									msg:'Loading. Please wait...'
								});
							}
						}
					}//,,
					//{
						//xtype: 'panel',
						//title: '3Dcoastline',
						//itemId: '3dcoastline',
						//closable: true,
						//html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="3dcoastline"><iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://3dcoastline.appspot.com"></iframe></div>'//,
					//},
				]
		});	// eo mapPanel = Ext.create('Ext.tab.Panel', {

		var westWin = Ext.create('widget.window', {
			height: 600,
			width: 200,
			x: 10,
			y: 60,
			title: 'Globus Folders',
			collapsible: true,
			animCollapse: true,
			closable: false,
			plain: true,
			layout: 'fit',
			items: [
				floater = Ext.create('Ext.Component', {
					xtype: 'component',
					floating: {
						shadow: false
					},
					height: 50,
					width: 50,
					x: 175,
					y: 75
				}), 
				//сделано на основе примера http://www.mysamplecode.com/2012/06/extjs-checkboxes-example.html:
				containerWestWin = Ext.create('Ext.container.Container', {
						//renderTo: 'myExample',
						renderTo: Ext.getBody(),
						height: 650,
						width: 200,
						layout: {
							align: 'stretch',
							type: 'vbox'
						},
						defaults: {
							labelWidth: 130,
							//margin: '5 5 5 5 '
						},
						items: [
							siteTreePanel,
							mapsTreePanel,
							//buttonInitGoogleEarth,
							//miniMapsTreePanel,
							objectsTreePanel,
							layersTreePanel,
							optionsTreePanel,
							usersTreePanel,
							onlineTreePanel,//,
						]
				}),
				minimapsWin = Ext.create('widget.window', {
					//title:Ext.fly('page-title').dom.innerHTML
					//,
					title: 'Mini Maps'
					,width:185
					,height:275
					,x: 520
					,y: 520
					,region: 'east',
					 collapsible: true,
					 animCollapse: true,
					 closable: false//,
					 //layout: 'fit'//,
					,plain:true
					//,closable:true
					,layout:'accordion'
					,layoutConfig:{animate:true}
					,border:false
					//,constrain: true
					,constrainHeader: true//,
					,items:[
					{
						title:'Camera/Lookat'
						,defaults:{border:false, activeTab:0}
						,items:[{
							defaults:{layout:'fit'}
							,xtype:'tabpanel'
							,items:[
							{
								title:'Camera:',
								html: '<div id="camera">	<table>		<tr><td>Latitude:<td><td id="id_lat_cam"></td></tr>		<tr><td>Longitude:<td><td id="id_lng_cam"></td></tr>		<tr><td>Altitude:<td><td id="id_alt_cam"></td></tr>		<tr><td>Heading:<td><td id="id_head_cam"></td></tr>		<tr><td>Tilt:<td><td id="id_tilt_cam"></td></tr>		<tr><td>Roll:<td><td id="id_roll_cam"></td></tr>		<tr><td>100/logAlt - 2:<td><td id="id_noalt_cam"></td></tr>	</table>	</font>		</div>'//,
							},{
								title:'Look At:',
								closable: true,
								html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="divlookat"></div>'//,
							}
							]
						}]
					},{
						title:'Следящие мини-карты'
						,defaults:{border:false, activeTab:0}
						,items:[{
							defaults:{layout:'fit'}
							,xtype:'tabpanel'
							,items:[{
								title:'GMap',
								html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="googleminimap"></div>',
								tbar:[{
									text:'Init (Reload), Следить за Глобусом',
									handler:function() {
										initGoogleMap(); 
									}
								}]
							},{
								title:'ЯКарты',
								closable: true,
								html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="yandexminimap"></div>',
								//hrefTarget: mapPanel,
								//Взято из http://examples.extjs.eu/?ex=dyntab:
								tbar:[{
									text:'Init (Reload), Следить за Глобусом',
									handler:function() {
										initYandexMap(); 
									}
								}]
							},{
								title:'OSM',
								closable: true,
								html: '<div style="border: 1px ridge #E8ECF9; width: 100%; height: 100%;" id="osmminimap"></div>',
								tbar:[{
									text:'Init (Reload), Следить за Глобусом',
									handler:function() {
										initOpenStreetMap(); 
									}
								}]
							}
							]
						}]
					},{
						title:'Неследящие мини-карты'
						,defaults:{border:false, activeTab:0}
						,items:[{
							defaults:{layout:'fit'}
							,xtype:'tabpanel'
							,items:[
								{
								title:'OSM',
								closable: true,
								html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=36.947,44.359,37.997,45.214&amp;layer=mapnik" style="border: 0px solid black"></iframe>'
								},{
								title:'Wiki',
								closable: true,
								html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://wikimapia.org/#lat=44.777913&lon=37.5317383&z=9&l=1&ifr=1&m=b"></iframe>'
								},{
								title:'Yahoo',
								closable: true,
								html: '<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.yahoo.com/embed#lat=44.69989765840318&lon=38.067626953125&zoom=9&mvt=m&trf=0"></iframe>'
								}]
							}]
					}
					]
				}), //eo minimapsWin = Ext.create('widget.window', {
				constrainedWin = Ext.create('Ext.Window', {
					title: 'Constrained Window',
					width: 100,
					height: 100,
					x: 520,
					y: 520,
					constrain: true,
					//layout: 'fit',
					//autoLoad:{url:'autoload-content.php'}
					autoLoad:{url:'hello.php'}
					//html: '<?php print "Hello, PHP!"; ?>',
					//items: {
					//	border: false
					//}
				}),
				{
				border: false
				}]
		});// eo westWin = Ext.create('widget.window', {
		//constrainedWin.show();
		//constrainedWin2.show();
		
    var addUserForm = Ext.create('Ext.form.Panel', {
        plain: true,
        border: 0,
        bodyPadding: 5,
        //url: 'save-form.php',
		url: 'adduser.php',

        fieldDefaults: {
            labelWidth: 55,
            anchor: '100%'
        },

        layout: {
            type: 'vbox',
            align: 'stretch'  // Child items are stretched to full width
        },

        items: [{
            xtype: 'combo',
            store: Ext.create('Ext.data.ArrayStore', {
                fields: [ 'email' ],
                data: [
                    ['test@gmail.com'],
                    ['someone@example.com'],
                    ['someone-else@example.com']
                ]
            }),
            displayField: 'email',
            plugins: [ Ext.ux.FieldReplicator ],
            fieldLabel: 'Name(gmail):',
            queryMode: 'local',
            selectOnTab: false,
            name: 'userName',
            onReplicate: function(){
                this.getStore().clearFilter();
            }
        }, {
            xtype: 'textfield',
            fieldLabel: 'TourGroup:',
            name: 'tourGroup'
        },{
            xtype: 'textfield',
            fieldLabel: 'TourClub:',
            name: 'tourClub'
        }//,{
        //    xtype: 'textarea',
        //    fieldLabel: 'Message text',
        //    hideLabel: true,
        //    name: 'msg',
        //    style: 'margin:0', // Remove default margin
        //    flex: 1  // Take up all *remaining* vertical space
        //}
		]
    });

    var addUserWin = Ext.create('Ext.window.Window', {
        title: 'Add User',
        collapsible: true,
        animCollapse: true,
        maximizable: true,
        width: 450,
        height: 250,
        minWidth: 300,
        minHeight: 150,
        layout: 'fit',
        items: addUserForm,
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            layout: {
                pack: 'center'
            },
            items: [{
                minWidth: 80,
                text: 'Add'
            },{
                minWidth: 80,
                text: 'Cancel'
            }]
        }]
    });
    //addUserWin.show();
	
	    var tzWin = Ext.create('Ext.window.Window', {
			title: 'Техническое задание',
			collapsible: true,
			animCollapse: true,
			maximizable: true,
			width: 650,
			height: 450,
			minWidth: 300,
			minHeight: 150,
			layout: 'fit',
			autoLoad:{url:'tzwin.php'}//,
		});

		var saveFileWin = Ext.create('Ext.window.Window', {
			title: 'Create kml-file',
			collapsible: true,
			animCollapse: true,
			maximizable: true,
			width: 450,
			height: 250,
			minWidth: 300,
			minHeight: 150,
			layout: 'fit',
			autoLoad:{url:'createkml.php'}//,
		});	
		
		var readFileWin = Ext.create('Ext.window.Window', {
			title: 'Read kml-file',
			collapsible: true,
			animCollapse: true,
			maximizable: true,
			width: 450,
			height: 250,
			minWidth: 300,
			minHeight: 150,
			layout: 'fit',
			autoLoad:{url:'readFile.php'}//,
		});	
		
	    var phpWin = Ext.create('Ext.window.Window', {
			title: 'PHP  Window 2',
			collapsible: true,
			animCollapse: true,
			maximizable: true,
			width: 450,
			height: 250,
			minWidth: 300,
			minHeight: 150,
			layout: 'fit',
			autoLoad:{url:'adduser2.php'},
			//items: addUserForm,
			dockedItems: [{
				xtype: 'toolbar',
				dock: 'bottom',
				ui: 'footer',
				layout: {
					pack: 'center'
				},
				items: [{
					minWidth: 80,
					text: 'Add'
				},{
					minWidth: 80,
					text: 'Cancel'
				}]
			}]
		});
		//phpWin.show();

		var tpl = new Ext.XTemplate(
			'File processed on the server.<br />',
			'Name: {fileName}<br />',
			'Size: {fileSize:fileSize}'
		);
		
		var uploadForm = Ext.create('Ext.form.Panel', {
			//renderTo: 'photowin',
			//renderTo: Ext.getBody(),
			width: 500,
			height: 100,
			frame: true,
			title: 'File Upload Form',
			bodyPadding: '10 10 0',
			defaults: {
				anchor: '100%',
				allowBlank: false,
				msgTarget: 'side',
				labelWidth: 50
			},
			items: [{
				xtype: 'textfield',
				fieldLabel: 'Name'
			},{
				xtype: 'filefield',
				id: 'form-file',
				emptyText: 'Select an image',
				fieldLabel: 'Photo',
				name: 'photo-path',
				buttonText: '',
				buttonConfig: {
					iconCls: 'upload-icon'
				}
			}],
			buttons: [{
				text: 'Save',
				handler: function(){
					var form = this.up('form').getForm();
					if(form.isValid()){
						form.submit({
							url: 'file-upload.php',
							waitMsg: 'Uploading photo to local web-storage...',
							success: function(fp, o) {
								msg('Success', tpl.apply(o.result));
							}
						});
					}
				}
			},{
				text: 'Reset',
				handler: function() {
					this.up('form').getForm().reset();
				}
			}]
		}); // eo Ext.create('Ext.form.Panel', {
		
	    var photoWin = Ext.create('Ext.window.Window', {
			title: 'Photo  Window ',
			//id: 'photowin',
			collapsible: true,
			animCollapse: true,
			maximizable: true,
			width: 640,
			height: 512,
			minWidth: 320,
			minHeight: 256,
			layout: 'fit',
			items: uploadForm,
			autoLoad:{url:'takeaphoto.html'}//,
			//items: addUserForm,
			//dockedItems: [{
			//	xtype: 'toolbar',
			//	dock: 'bottom',
			//	ui: 'footer',
			//	layout: {
			//		pack: 'center'
			//	},
			//	items: [{
			//		minWidth: 80,
			//		text: 'Take a photo'
			//	},{
			//		minWidth: 80,
			//		text: 'Cancel'
			//	}]
			//}]
		}); // eo photoWin = Ext.create('Ext.window.Window', {
		//photoWin.show();			
	
	
		var viewport = Ext.create('Ext.container.Viewport', {
			layout : 'border',
			defaults: {
				collapsible: true,
				//split: true, !!! Из-за этой строчки не загружались дополнительные карты!
				bodyStyle: 'padding:15px'
				},
			items : [mapPanel]
		});

//    } //eo launch: function() {

//google.load("earth", "1");
//google.setOnLoadCallback(initGoogleEarth);
westWin.show();
floater.show();	
//minimapsWin.show();

initGoogleEarth();
initGoogleMap();
	
}); // eo Ext.onReady(function(){
//onload="initGoogleEarth();"
//onload="if(window.prettyPrint)prettyPrint();init();"
//<div id="myExample"></div>
//<div id="map3d" style="border: 1px solid silver; width: 500px; height: 500px;"></div>
 
 </script>
 
</head>
<body >


</body>
</html>

